<template>

	<view style="display: flex; flex-direction: column; height: 100vh;">
			<indexSkeleton v-if="isLoading"></indexSkeleton>
			<view class="noneSkeleton" v-else>
				<view>
						<up-swiper imgMod="aspectFit" :list="bannerList" indicator indicatorMode="line" circular height="200"
							class="swip"></up-swiper>
						<view style="display:flex;flex-direction:row;justify-content: center;">
							<view class="detailCarten">
								<view class="d-title-1">
									<text>“吾之老”社区共享食堂</text>
									<view class="d-title-preserve">接受预定</view>
								</view>
								<view class="d-title-2">每日营业时间为:早9:00-晚8:00</view>
								<view class="d-title-3">食堂位置:重庆市巴南区鱼洞街道箭河社区</view>
								<view class="d-title-4">
									<image src="http://test.zshawk.top/static/img/index/preserve_address.jpg"></image>
									<text>您当前位置:{{addressName}}</text>
								</view>
							</view>
						</view>
				
					</view>
					<view class="shop-w">
						<view class="shop">
							<view class="left">
								<image src="http://test.zshawk.top/static/img/index/leftnav_logo.png" class="leftnav_logo"></image>
								<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
									<view v-for="(item,index) in leftNav" class="tab-nav"
										:style="Tab == index ? 'background-color: #f42d18;color:#ffffff;':'background-color: #f2f2f2'"
										@click="changeTab(item.dictValue)">
										<text class="tab-nav-text">
											{{ item.dictLabel }}
										</text>
									</view>
								</scroll-view>
				
							</view>
							<view class="right">
								<view class="right-title">{{ leftNav[Tab].dictLabel }}</view>
								<scroll-view scroll-y="true" style="width: 100%;height: 90%;">
									<view class="right-food" v-for="(item,index) in rightFoods" @click="openProductInfo(item)">
										<image :src="baseUrl+item.cd_url" class="icon"></image>
										<view class="food-name">{{ item.cd_name }}</view>
										<view class="food-value">￥{{ item.cd_price }}</view>
										<view class="sub" @click.stop="addToCart(item)">加入购物车</view>
									</view>
									<view style="width: 100%;height: 100rpx;"></view>
								</scroll-view>
				
							</view>
							<view class="shopcartBtn" @click="openShopCart">
								<view class="shopcartJoin">
									<image src="http://test.zshawk.top/static/img/index/shopcart.png"></image>
									<up-badge :value="shopcartTotalCount" type="error" :absolute="true" :offset="[5,13]"></up-badge>
								</view>
								<text class="shopcartTotalPrice">合计: ¥ {{shopcartTotalPrice}}元</text>
								<view class="shopcartCheck">
									<button type="default" style="color:#f00;border-radius: 30rpx;" :hover-stop-propagation='true'
										@click.stop="checkout" size='mini'>结算</button>
								</view>
							</view>
						</view>
					</view>
					<view class="productInfo-popup">
						<up-popup :show="productInfoShow" mode="center" :closeable="true" :round="10" @close="closeProductInfo">
							<scroll-view scroll-y="true">
								<view class="productInfo">
				
									<view>
										<view class="title-wrapper">
											<view class="title">商品详情</view>
										</view>
										<view class="product-img" v-if="productDetalItem">
											<up-image :src="baseUrl+productDetalItem.cd_url" width="100%">
												<template v-slot:loading>
													<up-loading-icon color="red"></up-loading-icon>
												</template>
												<template #error>
													<view style="font-size: 24rpx;">加载失败</view>
												</template>
											</up-image>
										</view>
										<view class="product-content">
											<view class="product-title">
												<uni-tag text="名称" type="warning" :inverted="true"/>
												<text class="inner-title">{{productDetalItem.cd_name}}</text>
											</view>
											<view class="product-price">
												<uni-tag text="价格" type="warning" :inverted="true"/>
												<view class="price">¥<text class="price-inner">{{productDetalItem.cd_price}}</text></view>
											</view>
											<view class="product-rate">
												<uni-tag text="评价" type="warning" :inverted="true"/>
												<uni-rate :touchable="false" v-model="productDetalItem.cd_evaluate" max="5"/>
											</view>
											<view class="product-title">
												<uni-tag text="详情" type="warning" :inverted="true"/>
												<text class="inner-title">{{productDetalItem.cd_intro}}</text>
											</view>
											<view class="product-desc">
												<image src="http://test.zshawk.top/static/img/product/productInfo.png" alt="" />
											</view>
										</view>
									</view>
				
								</view>
							</scroll-view>
						</up-popup>
					</view>
					<up-popup :show="shopCartShow" mode="bottom" :closeable="true" :round="10" @close="closeShopCart"
						@open="openShopCart">
				
						<scroll-view scroll-y="true" class="my-cart-inner">
							<view class="my-cart">
								<view class="title-wrapper">
									<view class="title">购物车</view>
									<view class="clearCart" @click="clearCart">
										（<text>清空购物车</text>
										<up-icon name="close" size="12" color="#999"></up-icon>）
									</view>
								</view>
								<view class="list-wrapper" v-if="cart.cartItems.length>0">
									<view class="cart-list">
										<!-- <scroll-view scroll-y="true" style="width: 100%;height: 90%;"> -->
										<view v-for="(item, index) in cart.cartItems" :key="item.cd_id" class="cart-item">
											<cartItem :info="item" @changeTotal="handleTotal"></cartItem>
										</view>
										<!-- </scroll-view> -->
									</view>
								</view>
								<view class="empty" v-else>您的购物车是空的</view>
							</view>
						</scroll-view>
					</up-popup>
			</view>
	</view>
</template>

<script setup>
	import indexSkeleton from '@/common/skeleton/indexSkeleton.vue.vue'
	import {
		baseUrl
	} from '@/common/api/config.js'
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import { getDishCategoryListAPI,getDishListAPI } from '@/services/dish.js';
	import QQMapWX from "@/common/location/qqmap-wx-jssdk.js";
	import cartItem from "@/common/cartItem/cartItem.vue";
	import {
		useUserStore,
		useCartStore
	} from '@/stores'

	// 加载中标记
	const isLoading = ref(false)

	//位置和天气信息
	let qqmapsdk = null
	const qqmapkey = "L6EBZ-I5O6I-SHWG5-UL5JO-D4OIK-7DBF4"
	const addressName = ref('')


	//购物车
	const cart = useCartStore()
	const shopcartTotalCount = ref(0)
	const shopcartTotalPrice = ref(0)

	//轮播
	const bannerList = reactive([
		'http://test.zshawk.top/static/img/index/banner/banner1.jpg',
		'http://test.zshawk.top/static/img/index/banner/banner2.jpg',
		'http://test.zshawk.top/static/img/index/banner/banner3.jpg',
	]);

	const leftNav = ref([])
	const Tab = ref(0)
	var rightFoods = ref([])


	onLoad(async () => {
		isLoading.value = true //开始加载，显示骨架屏
		
		const res = await getDishCategoryListAPI()//加载菜品列表
		leftNav.value = res.data.data
		changeTab(0) //默认第一次加载全部菜品
		
		//定义qqmap的sdk
		qqmapsdk = new QQMapWX({
			key: qqmapkey
		})
		mapsdk()
		
		isLoading.value = false //加载完成，隐藏骨架屏

	})

	//位置信息
	function mapsdk() {
		uni.showLoading({
			title: "获取位置中"
		})
		uni.getLocation({
			type:'gcj02',
			success(res) {
				// console.log(111111111111, res)
				qqmapsdk.reverseGeocoder({
					location:{
						latitude: res.latitude,
						longitude: res.longitude
					},
					success(res) {
						if (res.status == 0) {
							// addressName.value = res.result.address + res.result.formatted_addresses.recommend
							addressName.value = res.result.formatted_addresses.recommend
						}
						uni.hideLoading()
					},
					fail(err) {
						// console.log(err);
						showLocationWarning(err.message)
						uni.hideLoading()
					},
				})
			},
		})
		
	}

	function showLocationWarning(msg) {
		if (msg) {
			if (msg.indexOf('频繁调用') >= 0) {
				uni.showToast({
					title: '请勿频繁定位',
					icon: 'none'
				})
				return;
			}
			if (msg.indexOf('ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') >= 0) {
				uni.showModal({
					content: '请开启手机定位服务',
					showCancel: false
				})
				return;
			}
		}
		
		uni.getSetting({
			success(res) {
				if (!res.authSetting["scope.userLocation"]) {
					uni.showModal({
						title: "授权位置信息",
						content: "请确认授权位置信息，否则无法定位",
						success: function(msg) {
							if (msg.confirm) {
								uni.openSetting({
									success: function(e) {
										if (e.authSetting["scope.userLocation"] === true) {
											uni.showToast({
												title: "授权成功",
												icon: "success",
												duration: 1000,
											});
											mapsdk();
										} else {
											uni.showToast({
												title: "授权位置失败",
												icon: "none",
												duration: 1000,
											});
										}
									},
								});
							} else if (msg.cancel) {
								uni.showToast({
									title: "授权位置失败",
									icon: "none",
									duration: 1000,
								});
							}
						},
					});
				} else {
					uni.showToast({
						title: "无法获取当前位置",
						icon: "error",
						duration: 5000,
					});
				}
			},
		});

	}



	async function changeTab(index) {
		// console.log(11111111111, index)
		Tab.value = index
		let res = null
		if(index==0){
			res = await getDishListAPI()
		}else{
			res = await getDishListAPI({type_key:index})
		}
		console.log(333,res)
		rightFoods.value = res.data.data

	}

	//产品详情
	const productInfoShow = ref(false);
	const productDetalItem = ref({}) //商品详情对象

	function showProductInfo() {
		productInfoShow.value = true
	}

	function openProductInfo(item) {
		console.log(999999999,item)
		// 打开逻辑，比如设置 show 为 true  
		productDetalItem.value = item
		productInfoShow.value = true;
		
		// console.log('open');  
	}

	function closeProductInfo() {
		// 关闭逻辑，设置 show 为 false  
		productInfoShow.value = false;
		// console.log('close');  
	}

	//结算跳转结算页面
	function checkout() {
		const user = useUserStore()
		const cart = useCartStore()
		if(cart.cartItems.length>0){
			uni.navigateTo({
				url: '/subpkg/order/orderCheck/orderCheck?user='+
				encodeURIComponent(JSON.stringify(user.profile))
				+"&cartItems="+
				encodeURIComponent(JSON.stringify(cart.cartItems))
				+"&totalPrice="+
				encodeURIComponent(JSON.stringify(cart.getTotalPrice))
				+"&itemsCount="+
				encodeURIComponent(JSON.stringify(cart.getItemsCount))
			})
		}else{
			uni.showToast({
				title: '购物车中无商品',
				icon: 'none'
			})
		}
		
	}

	//购物车处理---------------
	//购物车弹窗是否显示
	const shopCartShow = ref(false);

	//打开购物车弹窗
	function openShopCart() {
		// 打开逻辑，比如设置 show 为 true  
		shopCartShow.value = true;
	}

	//关闭购物车弹窗
	function closeShopCart() {
		// 关闭逻辑，设置 show 为 false  
		shopCartShow.value = false;
	}

	//添加到购物车
	function addToCart(item) {
		// const cart = useCartStore()
		cart.addCartItem(item)
		shopcartTotalCount.value = cart.getItemsCount
		shopcartTotalPrice.value = cart.getTotalPrice

	}

	//处理子组件对购物车中食物数量的修改所带来的变化
	function handleTotal(tempNum) {
		shopcartTotalCount.value = cart.getItemsCount
		shopcartTotalPrice.value = cart.getTotalPrice
	}

	//清空购物车
	function clearCart() {
		cart.clearCart()
		shopcartTotalCount.value = cart.getItemsCount
		shopcartTotalPrice.value = cart.getTotalPrice
	}
</script>

<style lang="scss" scoped>
	.swip img {
		mode: scaleToFil;
		width: 100%;
		height: 100%;
	}

	.detailCarten {
		width: 95%;
		height: 200rpx;
		background-color: #f2f2f2;
		padding: 10rpx 10rpx;
		// margin-left: 2%;
		margin-top: 30rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;

		.d-title-1 {
			font-size: 24rpx;
			display: flex;
		}

		.d-title-preserve {
			margin-left: 10rpx;
			font-size: 18rpx;
			width: 100rpx;
			text-align: center;
			background-color: rgb(246, 218, 221);
			padding: 8rpx;
			border-radius: 30rpx;
			color: red;
			font-weight: bold;
		}

		.d-title-2 {
			font-size: 24rpx;
			width: 600rpx;
			text-align: center;
			color: #db112a;
			border: #e23e75 solid 1px;
			border-radius: 20rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			margin-top: 15rpx;
		}
		.d-title-3{
			font-size: 24rpx;
			margin-top: 15rpx;
		}
		
		.d-title-4 {
			margin-top: 15rpx;
			
			display: flex;
			font-size: 24rpx;
			text {
				margin-left: 5rpx;
				white-space: nowrap;
				/* 禁止文本换行，强制单行显示 */
				overflow: hidden;
				/* 隐藏超出容器的内容 */
				text-overflow: ellipsis;
				/* 超出部分使用省略号表示 */
			}
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.shop-w {
		padding: 15rpx;
	}

	.shop {
		margin-top: 10rpx;
		width: 100%;
		overflow: hidden;
	}

	.shopcartBtn {
		width: 85%;
		background-color: red;
		height: 90rpx;
		border-radius: 30rpx;
		line-height: 90rpx;
		position: fixed;
		z-index: 9999;
		bottom: 20rpx;
		left: 50%;
		transform: translate(-50%, 0%);
		display: flex;
		justify-content: space-between;

		.shopcartJoin {
			width: 150rpx;
			height: 90rpx;
			background-color: white;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.shopcartTotalPrice {
			color: white;
		}

		.shopcartCheck {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 15rpx;
		}
	}

	.left {
		background-color: #f2f2f2;
		width: 20%;
		// height: 750rpx;
		height: 840rpx;
		padding: 5rpx;
		// height: 90%;
		float: left;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.leftnav_logo {
			width: 50rpx;
			height: 50rpx;
		}
	}

	

	.tab-nav {
		transition: 250ms;
		width: 100%;
		display: flex;
		height: 50rpx;
		text-align: center;
		padding: 10rpx 0;
		border-radius: 10rpx;
		margin-top: 20rpx;
		justify-content: center;
		align-items: center;
	}


	.tab-nav-text {
		word-break: break-all;
		word-wrap: break-word;
		font-size: 25rpx;

	}

	.right {
		background-color: #ffffff;
		width: 75%;
		height: 840rpx;
		// display: inline-block;
		float: right;
		overflow: auto;
	}

	.right-title {}

	.right-food {
		width: 100%;
		height: 250rpx;
		position: relative;
		margin-top: 20rpx;

		.icon {
			position: absolute;
			width: 200rpx;
			height: 200rpx;
			left: 0;
			border-radius: 30rpx;
		}

		.food-name {
			position: absolute;
			top: 10rpx;
			left: 40%;
		}

		.food-value {
			position: absolute;
			bottom: 50rpx;
			left: 40%;
			color: red;

		}

		.sub {
			position: absolute;
			bottom: 50rpx;
			right: 50rpx;
			width: 120rpx;
			background-color: #fae4e6;
			text-align: center;
			padding: 5rpx;
			border-radius: 20rpx;
			color: #e02b2f;
			font-size: 22rpx;
			font-weight: bold;
		}
	}

	.right-food .icon {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		left: 0;
		border-radius: 30rpx;
	}

	.right-food .food-name {
		position: absolute;
		top: 10rpx;
		left: 40%;
	}

	.right-food .food-value {
		position: absolute;
		bottom: 50rpx;
		left: 40%;
		color: red;

	}

	.right-food .sub {
		position: absolute;
		bottom: 50rpx;
		right: 50rpx;
		width: 120rpx;
		background-color: #fae4e6;
		text-align: center;
		padding: 5rpx;
		border-radius: 20rpx;
		color: #e02b2f;
		font-size: 22rpx;
		font-weight: bold;
	}

	.productInfo-popup :deep(.u-popup__content__close) {
		position: fixed;
		background-color: white;
		border-radius: 100%;
		padding: 5rpx;
	}

	.productInfo {
		max-height: 80vh;
		padding: 8rpx 30rpx 32rpx;
		box-sizing: border-box;
		width: 85vw;

		.title-wrapper {
			height: 44rpx;
			display: flex;
			// align-items: center;
			position: relative;
			padding-top: 30rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.product-title {
			display: flex;
			margin: 10rpx 0;

			.inner-title {
				margin-left: 5rpx;
			}
		}

		.product-price {
			display: flex;
			margin: 10rpx 0;

			.price {
				margin-left: 5rpx;

				.price-inner {
					color: red;
				}
			}

		}

		.product-rate {
			display: flex;
			margin: 10rpx 0;
		}

		.product-desc {
			image {
				width: 100%;
			}
		}

	}

	.my-cart-inner {
		padding-top: 8rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 120rpx;
		box-sizing: border-box;
	}

	.my-cart {
		// background: #fff;
		height: 70vh;

		.title-wrapper {
			height: 44rpx;
			display: flex;
			// align-items: center;
			position: relative;
			padding-top: 30rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.clearCart {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999;
			}
		}

		.list-wrapper {
			.cart-list {
				max-height: calc(80vh - 156rpx);
				overflow: scroll;
			}
		}

		.empty {
			padding: 20rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
		}
	}
</style>
<style scoped>

</style>